<template>
  <div class="editContainer">
    <Left :dragController="dragController" />
    <Center :dragController="dragController" />
    <Right :dragController="dragController" />
  </div>
</template>

<script>
import Left from "../components/Left.vue";
import Center from "../components/Center.vue";
import Right from "../components/Right/index.vue";

import DragController from "@/lib";
export default {
  name: "Editting",
  components: {
    Left,
    Center,
    Right,
  },
  data() {
    return {};
  },
  created() {
    const widgets = this.getFormWidgets() || null;
    const dragController = new DragController(widgets);
    dragController.initEdittingMode();
    this.dragController = dragController
    this.$store.commit("saveDragController", dragController);
  },
  methods: {
    getFormWidgets() {
      const { id } = this.$route.query;
      if (id === undefined) return null;
      // TODO 从表单列表的编辑过来，需要先获取编辑项所包含的组件属性
      return [
        {
          type: "input",
          widgetProps: {
            label: "姓名",
            labelWidth: 80,
            field: "name",
            placeholder: "请输入姓名",
            colspan: 6,
            prefix: "",
            suffix: "",
            prefixIcon: "",
            suffixIcon: "",
            maxLength: 120,
            minLength: 0,
            clearable: true,
            readonly: false,
            disabled: false,
            required: false,
            rules: [],
          },
        },
        {
          type: "select",
          widgetProps: {
            label: "类型",
            labelWidth: 80,
            field: "type",
            colspan: 6,
            placeholder: "请选择类型",
            options: [
              {
                label: "四川",
                value: "SC",
                confirmed: true,
              },
              {
                label: "贵州",
                value: "GZ",
                confirmed: true,
              },
              {
                label: "云南",
                value: "YN",
                confirmed: true,
              },
            ],
            required: true,
          },
        },
      ];
    },
  },
};
</script>

<style>
.editContainer {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
}
</style>